<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .test {
    background: red;
  }

</style>
<template>
  <Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="80">
    <FormItem label="类型" prop="useType">
      <Select v-model="formValidate.useType" style="width:100%;" :transfer="true">
        <Option v-for="(item,index) in deviceTypes" :value="item.name" :key="'Type'+index">{{ item.name }}</Option>
      </Select>
    </FormItem>
    <FormItem label="型号" prop="model">
      <Input v-model="formValidate.model" placeholder="型号"></Input>
    </FormItem>
    <FormItem label="品牌" prop="brand">
      <Input v-model="formValidate.brand" placeholder="品牌"></Input>
    </FormItem>
    <FormItem label="协议" prop="prol">
      <Input v-model="formValidate.prol" placeholder="协议"></Input>
    </FormItem>
    <FormItem label="读取间隔" prop="readInterval" style="margin:0;">
      <Input v-model="formValidate.readInterval" placeholder="读取间隔"></Input>
    </FormItem>
  </Form>
</template>
<script>
  export default {
    created: function () {
      this.getDeviceTypes()
    },
    data: function () {
      const num = (rule, value, callback) => {
        let isNum = /^\+?[1-9][0-9]*$/.test(value)
        if (value === '' || value === undefined || !isNum) {
          callback(new Error('请输入数字！'))
        } else {
          callback()
        }
      }
      return {
        editOneData: {},
        deviceTypes: [],
        formValidate: {
          useType: '',
          model: '',
          brand: '',
          readInterval: 1,
          prol: ''
        },
        ruleValidate: {
          useType: [{required: true, message: '必填项！', trigger: 'blur'}, {
            required: true,
            message: '必填项！',
            trigger: 'change'
          }],
          model: [{required: true, message: '必填项！', trigger: 'blur'}, {
            required: true,
            message: '必填项！',
            trigger: 'change'
          }],
          brand: [{required: true, message: '必填项！', trigger: 'blur'}, {
            required: true,
            message: '必填项！',
            trigger: 'change'
          }],
          readInterval: [{validator: num, trigger: 'blur'}, {validator: num, trigger: 'change'}],
          prol: [{required: true, message: '必填项！', trigger: 'blur'}, {
            required: true,
            message: '必填项！',
            trigger: 'change'
          }]
        }
      }
    },
    methods: {
      handleSubmit: function (name) {
        this.$refs[name].validate((valid) => {
          if (valid) {
            sessionStorage.typeDeviceInfo = true
            this.submitReady()
          } else {
            sessionStorage.typeDeviceInfo = ''
            this.$Message.error('Fail!')
          }
        })
      },
      handleReset: function (name) {
        this.$refs[name].resetFields()
      },
      // 向后端请求设备类型数据
      getDeviceTypes: function () {
        let _this = this
        let pageab = {
          size: 9999,
          page: 0,
          groupType_eq: 1003
        }
        window.myapi.dict_list(pageab).then(res => {
          if (res.data.status === 200) {
            _this.deviceTypes = res.data.data.content
          } else {
            let msg = res.data.msg ? res.data.msg : '获取数据数据失败!'
            _this.$Message.error(msg)
          }
        }).catch(function (e) {
          let msg = e.response.data.message ? e.response.data.message : '获取数据失败!'
          _this.$Message.error({ duration: 0, closable: true, content: msg })
        })
      },

      // 重置form
      formReset: function () {
        this.$refs['formValidate'].resetFields()
      },
      // 父 传递 数据进来
      updateFormdata: function (data) {
        this.editOneData = JSON.parse(JSON.stringify(data))
        if (this.editOneData.id !== undefined) {
          this.formReset()
          this.formValidate = this.editOneData
        } else {
          this.formReset()
        }
      }
    }
  }

</script>
